<template>
  <div class="top-group">
    <div style="display: flex;justify-content: space-between;width: 100%">
      <slot></slot>
      <div class="topBrand" v-if="messageData!==null&&belong===3">
        <img :src="getUrl(messageData)" @dragstart="imgdragstart">
        <div class="topBrandName">
          <span class="brandName">{{messageData.pressName}}</span>
          <span class="account">{{messageData.account}}</span>
        </div>
      </div>
      <div class="topDescription" v-if="belong===4">
        <span>提交定制订单后可以电话 400-828-2711 询问定制进展</span>
      </div>
      <div>
        <div
          style="width: 80px;height: 30px;background:#EDEDED;border-radius: 4px;display: flex;justify-content: space-between"
          v-if="belong!==3&&belong!==4">
          <span class="s1">{{$t('common.price')}}</span>
          <div style="display: flex;flex-direction: column;margin-right: 12px">
          <span id="s2"
                class="el-icon-caret-top"
                @click="onChangeOrderType(3)"></span>
            <span id="s3"
                  class="el-icon-caret-bottom"
                  @click="onChangeOrderType(4)"></span>
          </div>
        </div>
        <div
          style="width: 80px;height: 30px;background: #EDEDED ;margin-top: 10px;border-radius: 4px;display: flex;justify-content: space-between">
          <span class="s1">{{$t('common.date')}}</span>
          <div style="display: flex;flex-direction: column;margin-right: 12px">
          <span id="s4"
                class="el-icon-caret-top"
                @click="onChangeOrderType(1)"></span>
            <span id="s5"
                  class="el-icon-caret-bottom"
                  @click="onChangeOrderType(2)"></span>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
  import ajax from '../../common/ajax'
  import api from '../../common/api'

  let userId
  let culture

  export default {
    name: "ResSort",
    data() {
      return {
        // 类型
        classifies: [],
        // 分类
        sub: [],
        //子分类
        childSub: [],
        subType: -1,
        // 手动选择的分类ID
        selectedPid: -1,
        thirdSub: -1,
        messageData: null
      }
    },
    props: {
      onChangeParentOrder: Function,
      belong: {
        default: 1
      }
    },
    created() {
      userId = this.$route.query.userId
      culture = this.$route.query.culture
    },
    mounted() {
      // getUserInfo(this)
    },
    methods: {
      imgdragstart(e) {
        e.preventDefault()
      },

      getUrl(t) {
        return t.pressLogo === "" ? require('../../assets/images/brand_logo.png') : t.pressLogo
      },
      /**
       * 改变资源排序方式
       *
       * @param type 资源排序标记
       */
      onChangeOrderType(type) {
        document.getElementById("s2").style.color = "#CCCCCC"
        document.getElementById("s3").style.color = "#CCCCCC"
        document.getElementById("s4").style.color = "#CCCCCC"
        document.getElementById("s5").style.color = "#CCCCCC"

        switch (type) {
          case 1:
            document.getElementById("s4").style.color = "#4381E6"
            break
          case 2:
            document.getElementById("s5").style.color = "#4381E6"
            break
          case 3:
            document.getElementById("s2").style.color = "#4381E6"
            break
          case 4:
            document.getElementById("s3").style.color = "#4381E6"
            break
        }

        this.onChangeParentOrder(type)
      }
    }
  }
</script>

<style scoped>
  .top-group {
    display: flex;
    align-items: center;
    margin: 0 auto;
    padding: 25px 0;
    justify-content: space-between;
    border-bottom: 1px solid #CCCCCC;
    width: 95%;
  }

  .s1 {
    font-size: 14px;
    margin-top: 5px;
    margin-left: 12px;
    color: #4381E6;
  }

  #s2, #s3, #s4, #s5 {
    font-size: 15px;
  }

  #s2 {
    color: #CCCCCC;
  }

  #s4 {
    color: #4381E6
  }

  #s3, #s5 {
    color: #CCCCCC;
  }

  #s2:hover, #s3:hover, #s4:hover, #s5:hover {
    cursor: pointer;
  }

  img {
    width: 70px;
    height: 70px;
  }

  .topBrand {
    display: flex;
  }

  .topBrandName {
    display: flex;
    flex-direction: column;
    margin-left: 20px;
    justify-content: space-between;
    padding: 5px 0 5px 0;
  }

  .brandName {
    font-size: 18px;
    color: black;
    font-weight: bolder;
  }

  .account {
    font-size: 18px;
    color: #666666
  }

  .topDescription {
    line-height: 70px;
    font-size: 18px;
    color: #333333;
    font-weight: bolder;
  }
</style>
